import styled from '@emotion/styled';
import { Button, Empty, Form, FormInstance, Input, Select, Spin } from 'antd';
import { t } from 'i18next';
import React, { useEffect, useState } from 'react';
import AgentSelect from './AgentSelect';
import GroupSkillRule from './GroupSkillRule';
import GroupSkillSelect from './GroupSkillSelect';
import SceneSelect from './SceneSelect';
import TransferHeader from './TransferHeader';
import AgentService from '@/modules/Agent';
import { SelectAgentOptions } from '@/modules/interface';

interface TransferFormProps {
	form?: FormInstance<any>;
	type: string;
	errorText?: string;
	sceneList: { id: number; name: string }[];
	skillGroups: { id: number; name: string }[];
	selectedGroupSkill: { id: number; name: string }[];
	headerOptions: { label: string; value: string; disable?: boolean }[];
	bizScenarioTransferToScenErrorText?: string;
	bizScenarioTransferToAgentErrorText?: string;
	bizScenarioTransferGroupSkill?: string;
	transferAgentIdErrorText?: string;
	defaultChecked?: string;
	defaultScene?: string;
	requestDatasource?: boolean;
	selectAgentOptions: SelectAgentOptions[];
	submit: (values: any) => void;
	onReset: () => void;
	changeGroupSkill: (value: any, options: any) => void;
	changeScenario: (value: any) => void;
	headerChangeHandler: (value: string) => void;
	onDropdown: () => void;
	onScroll: () => void;
}

const FormContainer = styled(Form)`
	.ant-form-item-label {
		padding: 10px 0;
	}
`;

const EmptyBizScenario = styled.div`
	text-align: center;
	padding: 20px 0;
`;

const LoadingText = styled.span`
	color: #bfbfbf;
`;

const FormSelect = styled(Select)`
	width: 100%;
	.ant-select-selector {
		height: 40px !important;
		background-color: #f6f6f6 !important;
	}
	.ant-select-selection-placeholder {
		line-height: 40px !important;
	}
	.ant-select-selection-item {
		line-height: 40px !important;
	}
	input {
		height: 40px !important;
	}
`;

const FormSelectMultiple = styled(Select)`
	width: 100%;
	.ant-select-selector {
		height: 40px !important;
		background-color: #f6f6f6 !important;
	}
	.ant-select-selection-placeholder {
		line-height: 40px !important;
	}
	input {
		height: 40px !important;
	}
`;

const TransferForm = (props: TransferFormProps) => {
	const {
		type = '',
		sceneList = [],
		headerOptions = [],
		skillGroups = [],
		selectedGroupSkill = [],
		bizScenarioTransferToAgentErrorText,
		bizScenarioTransferToScenErrorText,
		bizScenarioTransferGroupSkill,
		transferAgentIdErrorText,
		requestDatasource,
		defaultScene,
		onDropdown,
		onScroll,
		changeScenario,
		submit,
		onReset,
		changeGroupSkill,
		headerChangeHandler,
		defaultChecked = '',
		selectAgentOptions
	} = props;
	const [form] = Form.useForm();

	const [sceneError, setSceneError] = useState<string>('');

	useEffect(() => {
		if (defaultScene) {
			form.setFieldValue('transferScene', parseInt(defaultScene));
		}
	}, [defaultScene]);

	useEffect(() => {
		let no = form.getFieldValue('no');
		if (!selectAgentOptions.find(item => item.label === no)) {
			form.setFieldValue('no', undefined);
		}
	}, [selectAgentOptions]);
	useEffect(() => {
		form.resetFields();
	}, [type]);

	const onFinish = (values: any) => {
		const { groupSkill = [] } = values;
		if (groupSkill.length !== 0) {
			let groups: { id: number; name: string }[] = [];
			groupSkill.forEach((v: number) => {
				const group = skillGroups.find(item => item.id === v);
				if (group) {
					groups.push({ id: group?.id, name: group.name });
				}
			});
			submit({ ...values, groups });
		} else {
			submit({ ...values });
		}
	};

	const changeSelect = (e: any) => {
		if (e) {
			form.setFieldValue('groupSkill', []);
			changeScenario(e);
		}
		form.setFieldValue('no', undefined);
	};

	const changeHander = (value: any) => {
		headerChangeHandler && headerChangeHandler(value);
	};

	const getSelectDisable = () => {
		if (type === 'sceneTransfer') return !form.getFieldValue('transferScene');
	};

	const getFormItem = () => {
		if (type === 'sceneTransfer') {
			return (
				<>
					<SceneSelect error={bizScenarioTransferToScenErrorText} name={'transferScene'} list={sceneList} changeSelect={changeSelect} />
					<TransferHeader defaultChecked={defaultChecked} options={headerOptions} onChange={changeHander} />
					{getItem()}
				</>
			);
		}

		if (type === 'agentTransfer')
			return (
				<>
					<TransferHeader defaultChecked={defaultChecked} options={headerOptions} onChange={changeHander} />
					{getItem()}
				</>
			);
	};

	const getTips = () => {
		return <LoadingText>{t('load-datasource')}</LoadingText>;
	};
	const getNotFountView = () => {
		if (getSelectDisable()) return <EmptyBizScenario> {t('please-select-bizScenario-placeholder')} </EmptyBizScenario>;
		if (requestDatasource) {
			return (
				<Spin size="small" tip={getTips()} spinning={requestDatasource}>
					<div style={{ height: '60px' }}></div>
				</Spin>
			);
		} else {
			return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('agent-list-empty')} />;
		}
	};

	const getItem = () => {
		if (defaultChecked === 'default') return null;
		if (defaultChecked === 'agent')
			return <AgentSelect error={bizScenarioTransferToAgentErrorText} name={'no'} onDropdown={onDropdown} onScroll={onScroll} notFoundContent={getNotFountView()} options={selectAgentOptions} />;
		if (defaultChecked === 'groupSkill')
			return (
				<>
					<GroupSkillSelect disable={getSelectDisable()} error={bizScenarioTransferGroupSkill} list={skillGroups} name="groupSkill" changeGroupSkill={changeGroupSkill} />
					{selectedGroupSkill.length !== 0 ? <GroupSkillRule list={selectedGroupSkill} /> : null}
				</>
			);
	};

	return (
		<FormContainer layout="vertical" onFinish={onFinish} form={form} className="form-modal-container">
			{getFormItem()}
			<Form.Item className="submit-btn">
				<Button type="default" onClick={onReset}>
					{t('cancel')}
				</Button>
				<Button type="primary" htmlType="submit">
					{t('confirm')}
				</Button>
			</Form.Item>
		</FormContainer>
	);
};

export default TransferForm;
